<template>
    <div class="upload">
        <el-upload
              class="upLoad"
              :show-file-list="false"
              accept=".jpg, .gif, .png, .bmp .txt, .xlsx, .xls, .docx, .doc, .pdf, .ppt, .pptx, .key, .mp3, .wave, .mpeg, .midi, .mp4"
              action=""
              :on-success="uploadSuccess"
              :on-error="uploadError"
              :disabled="isShowProgress || attachsObj.length >= 5"
              :onProgress="onFileProgress"
              :before-upload="beforeUpload"
              :http-request="uploadRequest">
              <div class="addAttachs" :style="{'cursor': (isShowProgress  || attachsObj.length >= 5) ? 'not-allowed' : 'pointer'}">
                <i class="addBtn V7_iconV7tubiao_fujian V7_iconfont" style="padding-right:4px;font-size:12px"></i><span class="addBtn">添加附件</span><span class="size">（大小不超过50M）</span>
              </div>
        </el-upload>
        <div style="margin-top:5px">
          <draggable v-model="attachsObj" handle=".attachMove"  animation="150" ghostClass="dragClass">
            <div class="attachsItem" v-for="(item, index) in attachsObj" :key="item.id">
              <span class="attachMove" title="拖动排序"><i style="font-size:12px" class="V7_iconfont V7_iconV7tubiao_yidong"></i></span>
              <a :href="doMain + item.id" target="_blank" download>{{item.name}}</a>
              <span class="attachDel" @click="attachDelFun(item, index)"><i style="font-size:12px" class="V7_iconfont V7_iconV7tubiao_guanbi"></i></span>
              <span title="预览" v-preview.delete="[item.name, doMain + item.id]"><i style="font-size:14px;margin-left:8px;cursor:pointer" class="V7_iconfont V7_iconV7tubiao_kejian"></i></span>
            </div>
          </draggable>
        </div>
        <el-progress v-if="isShowProgress" :text-inside="false" :percentage="progress" :color="colors"></el-progress>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { deepClone } from '@/utils/common';
import { uploadQiniu } from '@/utils/upload'
import { fileSizePretty } from './notice'
import draggable from 'vuedraggable'
@Component({
  name: 'Upload',
  components: { draggable }
})
export default class Upload extends Vue {
    private $message: any
    private fileName = ''
    private fileSize = ''
    private isShowProgress: boolean = false
    private progress = 0
    private attachsObj: any = []
    private doMain = ''
    private $store: any
    private colors: any = [
      { color: '#008CEE', percentage: 90 },
      { color: '#67C23A', percentage: 100 }
    ]

    private createUpload (attachsObj) {
      this.attachsObj = deepClone(attachsObj)
      const initConfig = this.$store.state.common.initConfig
      const doMain = initConfig && initConfig.qiniuDomainMap ? initConfig.qiniuDomainMap.common : ''
      this.doMain = doMain + '/'
    }

    private destoryUpload () {
      this.attachsObj = []
      this.progress = 0
    }

    private uploadError () {
      this.$message({ message: '附件上传失败，请重新选择附件上传', type: 'error' })
    }

    private beforeUpload (file: any) {
      const fileName = /[^.]+$/.exec(file.name.replace(/\s/g, ''))
      const filterList = ['js', 'jsp', 'html', 'php', 'asp', 'aspx', 'jspx', 'exe', 'sh', 'py', 'vbs', 'xml', 'htm']
      if (fileName && filterList.includes(fileName[0])) {
        this.$message({ message: `不支持上传${filterList.map(v => '.' + v).join('、')}格式文件`, type: 'error' })
        return false
      }
      this.fileName = file.name.replace(/\s/g, '')
      this.fileSize = fileSizePretty(file.size)
      if (file.size / 1024 / 1024 > 50) {
        this.$message({ message: '附件大小不能超过50M', type: 'error' })
        return false
      } else {
        this.isShowProgress = true
      }
    }

    private attachDelFun (item: any, index: number) {
      this.attachsObj.splice(index, 1)
    }

    private uploadRequest (request: any) {
      uploadQiniu({ type: 'common', fileName: this.fileName, fileSize: this.fileSize }, request)
    }

    private onFileProgress (data: any) {
      this.progress = Math.ceil(data.percent)
    }

    private uploadSuccess (data: any) {
      this.attachsObj.push({ id: data.key ? `/${data.key}` : '', name: this.fileName, size: this.fileSize })
      this.isShowProgress = false
      this.progress = 0
    }
}
</script>

<style lang="stylus" scoped>
.upload
    >>> .el-progress__text
            color #ccc
            font-size 12px !important
    .dragClass
      opacity: 0
    .addAttachs
        padding 8px 12px
        font-size 12px
        line-height 12px
        border 1px solid #E7E9ED
        border-radius 4px
        .addBtn
            color #008BEE
        .size
            color #767E91
    .attachsItem
        padding 8px 9px
        font-size 12px
        line-height 12px
        background #F1F8FD
        border-radius 4px
        color #008BEE
        display inline-block
        margin 0px 10px 10px 0px
        .attachMove
            margin-right 10px
            cursor move
        .attachDel
            margin-left 10px
            cursor pointer
</style>
